<template>
    <div class="baidu_map_container">
        <div class="search_container">
            <el-input size="medium" v-model="keyword">
                <template slot="prepend">搜索地址</template>
            </el-input>
        </div>
        <div class="map_container" :style="mapStyle">
            <baidu-map :center="mapData.center" :zoom="mapData.zoom" scroll-wheel-zoom
                       style="width: 100%; height: 100%"
                       @ready="mapReady"
                       @click="handleClickMap"
                       @moving="syncCenterAndZoom"
                       @moveend="syncCenterAndZoom"
                       @zoomend="syncCenterAndZoom">
                <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
                <!--定位控件-->
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"/>
                <!--比例尺控件-->
                <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"/>
                <!--城市切换控件-->
                <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"/>
                <!--全景控件-->
                <bm-panorama/>
                <!--地区检索控件-->
                <bm-view v-if="keyword" class="map"/>
                <bm-local-search :panel="false" v-if="keyword" :keyword="keyword" :auto-viewport="true"/>
            </baidu-map>
        </div>
    </div>
</template>

<script>
export default {
    name: "Baidu",
    props: {
        center: {
            type: Object,
            default() {
                return {lng: 116.404, lat: 39.915};
            },
        },
        zoom: {
            type: Number,
            default: 13,
        },
        point: {
            type: Object,
            default: null,
        },
    },
    data () {
        const _this = this;
        return {
            keyword: '',
            mapData: {
                //中心坐标
                center: _this.center,
                //缩放级别
                zoom: _this.zoom,
            },
            BMap: undefined,
            map: undefined,
            pointData: {},
        };
    },
    computed: {
        mapStyle() {
            let height = $(this.getActiveTabsContainer()).height() * 0.8;
            return {
                height: `${ height - 150 }px`,
            };
        },
    },
    methods: {
        mapReady ({BMap, map}) {
            const _this = this;
            _this.pointData = {};
            //保存百度地图类
            _this.BMap = BMap;
            //保存地图对象
            _this.map = map;
            if (_this.point) {
                _this.createMaker(new BMap.Point(_this.point.lng, _this.point.lat));
            }
        },
        handleClickMap(e) {
            const _this = this;
            _this.createMaker(new _this.BMap.Point(e.point.lng, e.point.lat));
        },
        createMaker(point) {
            const _this = this;
            if (!_this.map) {
                return;
            }
            //清除地图上所有的覆盖物(保证每次点击只有一个标记)
            _this.map.clearOverlays();
            //创建定位标记
            let marker = new _this.BMap.Marker(point);
            //将标记添加到地图上
            _this.map.addOverlay(marker);
            //创建坐标解析对象
            let geocoder = new _this.BMap.Geocoder();
            //解析当前的坐标成地址
            geocoder.getLocation(point, rs => {
                console.log(rs);
                _this.pointData = {
                    lng: point.lng,
                    lat: point.lat,
                    address: rs.address,
                };
            });
        },
        syncCenterAndZoom (e) {
            let _this = this;
            _this.mapData = $.extend({}, _this.mapData, {
                zoom: e.target.getZoom(),
                center: e.target.getCenter(),
            });
        },
        async confirm() {
            const _this = this;
            if (!_this.$utils.isNotEmpty(_this.pointData.lng) || !_this.$utils.isNotEmpty(_this.pointData.lat)) {
                _this.$message.error('选择地址！');
                return;
            }
            return _this.pointData;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>
